/**
 * Shopware 4.0
 * Copyright © 2012 shopware AG
 *
 * According to our dual licensing model, this program can be used either
 * under the terms of the GNU Affero General Public License, version 3,
 * or under a proprietary license.
 *
 * The texts of the GNU Affero General Public License with an additional
 * permission and of our proprietary license can be found at and
 * in the LICENSE file you have received along with this program.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * "Shopware" is a registered trademark of shopware AG.
 * The licensing of the program under the AGPLv3 does not imply a
 * trademark license. Therefore any rights, title and interest in
 * our trademarks remain entirely with us.
 *
 * @category   Shopware
 * @package    Shopware_Styling
 * @subpackage DesktopSwitcher
 * @copyright  Copyright (c) 2012, shopware AG (http://www.shopware.de)
 * @version    $Id$
 * @author shopware AG
 */
@mixin shopware-desktopswitcher {


    .#{$prefix}desktop-switcher-outer-container {
        @include single-transition(bottom, 0.1s);

        &:hover {
            bottom: 35px !important;
            z-index: 10;
        }
    }

    .#{$prefix}desktop-switcher-control, .add-desktop {
    	@include single-transition(all, 0.2s, linear);
        @include border-radius(3px 3px 0 0);
        @include user-select(none);
        cursor: pointer;
        position: relative;
        display: inline-block;
        color: #fff;
        text-shadow: 0 1px 0 #000;
        background: rgba(0, 0, 0, .3);
        width: 101px;
        height: 21px;
        line-height: 25px;
        text-align: center;
        font-size: 11px;
        text-decoration: none;
        margin: 0 4px;
        top: -3px;
        
        /** Hover style */
        &:hover { background: rgba(0, 0, 0, .2) }

        /** Active style */
        &.active {

            background: theme-image($theme, 'btn_desktop-switcher.png') no-repeat;
            font-weight: 700;
            height: 25px;
            line-height: 30px;
            top: -5px;
        }
    }
    .add-desktop {
        width: 38px;
        font-weight: bold;
    }
}